<section class="listSection">
  <div class="listNav">
    主页>字典管理>污水过程监控因子字典
  </div>

  <section class="content selectContent">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>查询条件</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect" >
        <form #waterFactorList="ngForm" (ngSubmit)="listMessage(waterFactorList.value)" class="form-inline" >
          <div class="row">
            <div class="form-group search-list">
              <label>污染物编码：</label>
              <input [(ngModel)]="waterFactorCode" name="waterFactorCode" type="text" class="form-control" placeholder="请输入污染物编码">
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn" type="submit" >查询</button>
            </div>
          </div>
          <div class="row">
            <div class="form-group search-list">
              <label>污染物名称：</label>
              <input [(ngModel)]="waterFactorName" name="waterFactorName" type="text" class="form-control" placeholder="请输入污染物名称">
            </div>
            <div class="form-group search-list search-list-btn ">
              <button class="btn selectButtonOfA reset-btn" type="reset">清除</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>


  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>污染因子列表</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
        <form>
          <div class="box-body">
            <div class="add-box clearfix">
              <button  class="btn add-tit" data-toggle="modal" data-target="#addModal">新增</button>
            </div>
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
                <th>编码</th>
                <th>名称</th>
                <th>单位</th>
                <th>类型</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let waterFactor of list">
                <td>{{waterFactor.waterFactorCode}}</td>
                <td>{{waterFactor.waterFactorName}}</td>
                <td>{{waterFactor.waterFactorUnit}}</td>
                <td>{{waterFactor.waterFactorType}}</td>
                <td>
                  <span>
                    <img src="assets/icon/see.png" alt="查看">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(waterFactor)">查看</a>
                  </span>
                  <span>
                     <img src="assets/icon/edit.png" alt="编辑">
                      <a href="#" data-toggle="modal" data-target="#updateModal" (click)="userMessage(waterFactor)">编辑</a>
                  </span>
                  <span>
                     <img src="assets/icon/delete.png" alt="删除">
                      <a href="#" data-toggle="modal" data-target="#deleteModal" (click)="userMessage(waterFactor)">删除</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <page [pageParams]="{pageSize:pageSize,totalNum:totalNum,curPage:curPage,totalPage:totalPage}" (changeCurPage)="getPageData($event)"></page>
        </form>
      </div>
    </div>
  </section>

  <!-- userMessage -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">污染因子详情：</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>编码：</td>
                  <td>{{queryMessage.waterFactorCode}}</td>
                </tr>
                <tr>
                  <td>名称：</td>
                  <td>{{queryMessage.waterFactorName}}</td>
                </tr>
                <tr>
                  <td>单位：</td>
                  <td>{{queryMessage.waterFactorUnit}}</td>
                </tr>
                <tr>
                  <td>类型：</td>
                  <td>{{queryMessage.waterFactorType}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group search-list-btn">
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- add -->
  <form #addWaterFactor="ngForm" (ngSubmit)="addMessage(addWaterFactor.value,addWaterFactor.valid)">
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addModalLabel">新增污染因子</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td><span class="red">*</span>编码：</td>
                  <td><input type="text" [(ngModel)]="addMessages.waterFactorCode" class="form-control" name="waterFactorCode" required ></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>名称：</td>
                  <td><input type="text" [(ngModel)]="addMessages.waterFactorName" class="form-control" name="waterFactorName" required ></td>
                </tr>
                <tr>
                  <td>单位：</td>
                  <td><input type="text" [(ngModel)]="addMessages.waterFactorUnit" class="form-control" name="waterFactorUnit"></td>
                </tr>
                <tr>
                  <td>类型：</td>
                  <td><input type="text" [(ngModel)]="addMessages.waterFactorType" class="form-control" name="waterFactorType"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn sumbit-btn" type="submit" [disabled]="!addWaterFactor.form.valid">提交</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- update -->
  <form #waterFactorUpdate="ngForm" (ngSubmit)="updateMessage(waterFactorUpdate.value,waterFactorUpdate.valid)">
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="updateModalLabel">编辑污染因子</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <input type="text" [(ngModel)]="updateMessages.id" class="form-control hidden" name="id" value="{{updateMessages.id}}" >
                <tr>
                  <td><span class="red">*</span>编码：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.waterFactorCode" class="form-control" name="waterFactorCode" value="{{updateMessages.waterFactorCode}}" placeholder="{{waterFactorCode}}" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>名称：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.waterFactorName" class="form-control" name="waterFactorName" value="{{updateMessages.waterFactorName}}" placeholder="{{waterFactorName}}" required></td>
                </tr>
                <tr>
                  <td>单位：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.waterFactorUnit" class="form-control" name="waterFactorUnit" value="{{updateMessages.waterFactorUnit}}" placeholder="{{waterFactorUnit}}"></td>
                </tr>
                <tr>
                  <td>类型：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.waterFactorType" class="form-control" name="waterFactorType" value="{{updateMessages.waterFactorType}}" placeholder="{{waterFactorType}}"></td>
                </tr>
                <tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button  class="btn sumbit-btn" type="submit" [disabled]="!waterFactorUpdate.form.valid">提交</button>
          <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
    </div>
  </div>
  </form>
  <!-- delete -->
  <div class="modal fade deleteModal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="deleteModalLabel">删除污染因子</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>是否删除该污染因子？</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn" data-name="{{queryMessage.id}}"  (click)="deleteById($event)">确定</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade deleteModal" id="error" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="errorMessage">错误信息</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>{{errorMessage}}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer2 text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn"  data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>


